<template>
  <!-- <div>
    <a-row v-for="(item, index) in files">
      <a-col :span="4">第{{ index + 1 }}个文件</a-col>
      <a-col
        :span="4"
        v-if="item.type == 'jpg' || item.type == 'jpeg' || item.type == 'png' || item.type == 'gif'"
        >图片</a-col
      >
      <a-col :span="4" v-else-if="item.type == 'pdf'">pdf文件</a-col>
      <a-col :span="4" v-else>{{ item.type }}</a-col>
      <a-col
        :span="16"
        v-if="item.type == 'jpg' || item.type == 'jpeg' || item.type == 'png' || item.type == 'gif'"
      >
        <span class="cms-span-link" @click="openFile(getImageFileUrlPrefix + item.id)">
          {{ item.name }} (点击文件名称查看或下载文件)</span
        >
      </a-col>
      <a-col :span="16" v-else-if="item.type == 'pdf'">
        <span class="cms-span-link" @click="openFile(getPdfFileUrlPrefix + item.id)">
          {{ item.name }} (点击文件名称查看或下载文件)</span
        ></a-col
      >
      <a-col :span="16" v-else>
        <span class="cms-span-link" @click="openFile(getFileUrlPrefix + item.id)">
          {{ item.name }} (点击文件名称查看或下载文件)</span
        ></a-col
      >
    </a-row>
  </div> -->
  <a-divider style="border-color: #ccc" dashed />
  <a-typography-title :level="4">附件</a-typography-title>
  <a-typography-paragraph>
    <ul>
      <li v-for="item in files">
        <a-typography-link
          :href="getImageFileUrlPrefix + item.id"
          v-if="
            item.type == 'jpg' || item.type == 'jpeg' || item.type == 'png' || item.type == 'gif'
          "
          >{{ item.name }}</a-typography-link
        >
        <a-typography-link :href="getPdfFileUrlPrefix + item.id" v-else-if="item.type == 'pdf'">{{
          item.name
        }}</a-typography-link>
        <a-typography-link :href="getFileUrlPrefix + item.id" v-else>{{
          item.name
        }}</a-typography-link>
      </li>
    </ul>
  </a-typography-paragraph>
</template>
<script lang="ts">
  import { defineComponent, ref } from 'vue';

  import { useGlobSetting } from '/@/hooks/setting';
  import { FileInfo, getImageFileApi, getPdfFileApi, getFileApi } from '/@/api/platform/file';

  export default defineComponent({
    name: 'CmsArticleFiles',
    props: {
      values: {
        type: String,
        required: true,
      },
    },
    components: {},
    setup(props) {
      const files = ref<FileInfo[]>([]);

      console.log('CmsArticleFiles setup props', props);
      resolveFiles(props.values);

      const { uploadUrl } = useGlobSetting();

      const getImageFileUrlPrefix = ref<string>(uploadUrl + getImageFileApi);
      const getPdfFileUrlPrefix = ref<string>(uploadUrl + getPdfFileApi);
      const getFileUrlPrefix = ref<string>(uploadUrl + getFileApi);

      function resolveFiles(data) {
        let objs = JSON.parse(data);
        if (objs != null && objs.length > 0x0) {
          objs.forEach((element) => {
            files.value.push({
              id: element.id,
              name: element.name,
              type: element.type,
            });
          });
        }
      }

      /**
       * 打开文件
       */
      function openFile(url) {
        window.open(url, '_blank');
      }

      return {
        files,
        getImageFileUrlPrefix,
        getPdfFileUrlPrefix,
        getFileUrlPrefix,
        resolveFiles,
        openFile,
      };
    },
    watch: {
      //接收props传值由于无法确定是否完成传值和接收，因此在watch中进行处理，props传值完成或变化后再对当前的数据进行更新并调用方法对页面显示进行更新
      values: function (newVal, oldVal) {
        // console.log('watch props values', newVal);
        this.resolveFiles(newVal);
      },
    },
  });
</script>
<style scoped lang="less">
  // @import './cms.less';
</style>
